<script>
export default {
  name: "antPage",
  data() {
    return {
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 2,
      pageSize: 10,
      total: 50,
      visible: false,

      // form: {
      //   layout: 'horizontal',
      //   fieldA: '',
      //   fieldB: '',
      // },

      // wrapperCol:{span: 14, offset: 4},

      formInline: {
        user: '',
        password: '',
      },


    };
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      console.log(current)
    },
    handleSubmit() {
      console.log(this.formInline);
    },

    // 对话框
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },

  },



}
</script>

<template>
<div>
  <a-button type="primary">
    Primary
  </a-button>
  <a-button>Default</a-button>
  <a-button type="dashed">
    Dashed
  </a-button>
  <a-button type="danger">
    Danger
  </a-button>
  <a-config-provider :auto-insert-space-in-button="false">
    <a-button type="primary">
      按钮
    </a-button>
  </a-config-provider>
  <a-button type="primary">
    按钮
  </a-button>
  <a-button type="link">
    Link
  </a-button>



  <a-icon type="vertical-left" />
  <a-icon type="down-square" />







  <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      Hover me <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item v-for="num in 5" :key="num">
        <a href="javascript:;">1st menu item</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>




  <a-pagination
      v-model="current"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      @showSizeChange="onShowSizeChange"
  >
    <template slot="buildOptionText" slot-scope="props">
      <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
      <span v-if="props.value === '50'">全部</span>
    </template>
  </a-pagination>




  <a-button type="primary" @click="showModal">
    Open Modal
  </a-button>
  <a-modal v-model="visible"  @ok="handleOk" :footer="null" width="350px">
<!--    <a-form-model :layout="form.layout" :model="form">
      <a-form-model-item label="Field A">
        <a-input v-model="form.fieldA" placeholder="input placeholder" />
      </a-form-model-item>
      <a-form-model-item label="Field B">
        <a-input v-model="form.fieldB" placeholder="input placeholder" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="wrapperCol">
        <a-button type="primary">
          Submit
        </a-button>
      </a-form-model-item>
    </a-form-model>-->



    <a-form-model layout="horizontal" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
      <a-form-model-item>
        <a-input v-model="formInline.user" placeholder="Username">
          <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-input v-model="formInline.password" type="password" placeholder="Password">
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button
            type="primary"
            html-type="submit"

        >
          Log in
        </a-button>
      </a-form-model-item>
    </a-form-model>


  </a-modal>










</div>
</template>

<style scoped lang="less">
//深层覆盖
/deep/.ant-modal-body {
  padding: 40px 40px 10px;
}

// ::v-deep    不支持less和sass
//>>>


.ant-btn-danger {
  background-color: green;
}
</style>